<template>
  <div class="nav">
    <div class="nav-item">
      <div class="wangji-job">
        <RouterLink to="/shouyeView"><span><</span></RouterLink>
        <div>热销产品</div>
        <span class="dd"></span>
      </div>
    </div>
    <div class="nav-job">
      <van-tabs>
        <van-tab v-for="index in 8" :title="'标签 ' + index"> </van-tab>
      </van-tabs>
    </div>
    <div class="shangpin">
        <div class="shangpin-job">
            <div><img src="../../assets/images/20.png" alt="" /></div>
            <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
            <div class="a">
                <div class="b">￥<span>108</span></div>
                <div>¥ 297</div>
            </div>
        </div>
        <div class="shangpin-job">
            <div><img src="../../assets/images/20.png" alt="" /></div>
            <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
            <div class="a">
                <div class="b">￥<span>108</span></div>
                <div>¥ 297</div>
            </div>
        </div>
    </div>
    <div class="shangpin">
        <div class="shangpin-job">
            <div><img src="../../assets/images/20.png" alt="" /></div>
            <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
            <div class="a">
                <div class="b">￥<span>108</span></div>
                <div>¥ 297</div>
            </div>
        </div>
        <div class="shangpin-job">
            <div><img src="../../assets/images/20.png" alt="" /></div>
            <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
            <div class="a">
                <div class="b">￥<span>108</span></div>
                <div>¥ 297</div>
            </div>
        </div>
    </div>
  </div>
</template>
<style scoped>
.wangji-job {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.nav-item span {
  padding: 5px 0;
}
.wangji-job div {
  color: #09b674;
}
.shangpin img {
  width: 200px;
  height: 200px;
}
.a {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.a div:nth-child(2) {
    color: #ccc;
    text-decoration: line-through;
    font-weight: 100;
    margin-right: 20px;
}
.b {
  color: #f00;
}
.b span {
  color: #f00;
  font-size: 18px;
}
.shangpin {
  padding: 0 10px;
  display: flex;
  justify-content: space-around;
}
.shangpin-job {
  width: 50%;
}
</style>
